<template>
  <div class="tip">
    <div class="inner" :class="{'move': scroll}" :style="styleName">
      <div class="tip-inder">{{text}} {{scroll ? text : '' }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScrollToRate",

  props: {
    text: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      styleName: "animation-duration: 6s",
      scroll: false,
      tipWidth: 0
    };
  },

  watch: {
    text: {
      handler(val) {
        this.textScroll()
      },
      immediate: false
    }
  },

  methods: {
    textScroll() {
      // 等待节点挂载后再执行,热门线路tip滚动实现
      this.$nextTick(() => {
        let query = wx.createSelectorQuery().in(this)
        query.select('.tip').boundingClientRect(data => {
          this.tipWidth = data.width
          console.log('tip', this.tipWidth)
        }).exec();
        query.select('.tip-inder').boundingClientRect(data => {
          console.log('tip-inder', data.width)
          if(data.width > this.tipWidth) {
            let w = Number(data.width)
            let time = Math.round(w / 40)
            this.styleName = `animation-duration: ${time}s`
            this.scroll = true
          }
        }).exec();
      })
    }
  }
};
</script>

<style lang="scss">
.tip {
  width: 100%;
  background: #f6f9ff;
  color: #4d82ff;
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
  overflow: hidden;
  box-sizing: border-box;
  white-space: nowrap;
}

.tip .inner {
  overflow: hidden;
  display: inline-block;
  animation: scroll 10s linear infinite;
}

.tip .inner .tip-inder {
  white-space: nowrap;
  padding-left: 30rpx;
}

.tip .inner.move {
  animation-name: scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
</style>